<template>
  <div>
    <div class="table-operator">
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.cb_id"
        :columns="selectedColumns"
        :data-source="selectedData"
        :pagination="{ pageSize: 10, total: totalCount }"
      >
        <template slot="title">
          <a-button size="small" type="danger" icon="plus" @click="businessModal">添加业务</a-button>
          <span style="color:#f00">涉及专利业务务必用含有专利资质的公司签订合同</span>
          <a style="margin-left: 20px" @click="showlist"><a-icon type="file-unknown"/> 查看业务活动代码</a>
        </template>
        <template slot="footer">
          <a-form-model layout="inline">
            <a-form-model-item label="添加奖励代码">
              <a-input-search size="small" type="text" placeholder="输入奖励代码">
                <a-button type="primary" slot="enterButton">
                  确认
                </a-button>
              </a-input-search>
            </a-form-model-item>
          </a-form-model>
        </template>
        <template slot="contract_index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="type" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="ext" slot-scope="text">
          <a-button shape="circle" icon="plus" size="small" style="margin-right: 10px" @click="businessModal"/>
          <a-button size="small" type="danger">清除</a-button>
          {{text}}
        </template>
        <template slot="price" slot-scope="text">
          {{text}}
          <a-button type="link" @click="showAffix">查看</a-button>
        </template>
        <template slot="db" slot-scope="text">
          <a-tag v-if="text === '是'" color="red">{{text}}</a-tag>
          <a-tag v-else-if="text === '否'">{{text}}</a-tag>
        </template>
        <template slot="remark" slot-scope="text">
          <a-button size="small" type="primary" v-if="text === '已填写'" @click="showRemark">{{text}}</a-button>
          <a-button size="small" type="danger" v-else-if="text === '未填写'" @click="showRemark">{{text}}</a-button>
        </template>
        <template slot="other">
          <div>上传&nbsp;&nbsp;
            <a-input-search size="small" type="text" style="width: 200px" placeholder="输入业务代码">
              <a-button type="primary" slot="enterButton">
                确认
              </a-button>
            </a-input-search>
          </div>
        </template>
      </a-table>
    </div>
    <a-descriptions :column="11">
      <a-descriptions-item label="乙方">
        北京卓一
      </a-descriptions-item>
      <a-descriptions-item label="包含">
        5项业务
      </a-descriptions-item>
      <a-descriptions-item label="总官费">
        4000.00
      </a-descriptions-item>
      <a-descriptions-item label="代理费">
        4000.00
      </a-descriptions-item>
      <a-descriptions-item label="总费用">
        8000.00
      </a-descriptions-item>
      <a-descriptions-item :span="2" label="发送短信至">
        15050835601
      </a-descriptions-item>
      <a-descriptions-item :span="4">
        <a-button type="primary" size="large" style="margin-right:5px">发送电子版合同</a-button>
        <a-button type="primary" size="large" style="margin-right:5px">发送到邮箱</a-button>
        <a-button type="primary" size="large">发送短信后才可下载PDF版本</a-button>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions>
      <a-descriptions-item>
        <span style="color: #f00">目前状态：合同已发送等待客户提交确认</span><a-button size="small" style="margin-right:5px;margin-left: 5px">刷新</a-button> <a-button size="small" @click="onSign">查看客户签字</a-button>
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <select-business v-if="visible" @cancel="onCancel"></select-business>
    <a-modal
      title="客户签字"
      v-model="singVisible"
      :footer="null"
    >
      <img style="width: 100%" src="https://design-upload.oss-cn-beijing.aliyuncs.com/sign.png" />
    </a-modal>
    <a-modal title="活动业务/奖励列表" v-model="hdVisible" :width="1000">
      <a-tabs type="card">
        <a-tab-pane key="1" tab="活动业务">
          <a-table
            bordered
            size="middle"
            :row-key="(record) => record.id"
            :pagination="{ pageSize: 10, total: totalCount }"
            :columns="hdColumns"
            :data-source="hdData"
          >
            <template slot="note" slot-scope="text">
              <a-popover>
                <template slot="content">
                  <div>{{text}}</div>
                </template>
                <ellipsis :length="28">{{text}}</ellipsis>
              </a-popover>
            </template>
            <template slot="code" slot-scope="text">
              <a class="copy" :data-clipboard-text="text" @click="copy">{{text}}<a-icon type="copy" /></a>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="活动奖励">
          <a-table
            bordered
            size="middle"
            :row-key="(record) => record.id"
            :pagination="{ pageSize: 10, total: totalCount }"
            :columns="jlColumns"
            :data-source="jlData"
          >
            <template slot="note" slot-scope="text">
              <a-popover>
                <template slot="content">
                  <div>{{text}}</div>
                </template>
                <ellipsis :length="28">{{text}}</ellipsis>
              </a-popover>
            </template>
            <template slot="code" slot-scope="text">
              <a class="copy" :data-clipboard-text="text" @click="copy">{{text}}<a-icon type="copy" /></a>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <a-modal centered :destroy-on-close="true" title="填写备注" :width="600" v-model="remarkVisible">
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="活动类型" >
          <a-radio-group button-style="solid" style="display: flex;justify-content: space-between;align-items: center">
            <a-radio-button value="1">
              文字
            </a-radio-button>
            <a-radio-button value="2">
              图形
            </a-radio-button>
            <a-radio-button value="3">
              文字+图形
            </a-radio-button>
            <a-radio-button value="4">
              3d
            </a-radio-button>
            <a-radio-button value="5">
              颜色
            </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="商标名字" >
          <a-input type="text"/>
        </a-form-model-item>
        <a-form-model-item label="类别" >
          <a-select>
            <a-select-option value="1">1</a-select-option>
            <a-select-option value="2">2</a-select-option>
            <a-select-option value="3">3</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="申请主体">
          <a-select
            show-search
            placeholder="请选择申请主体"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            style="width: 90%"
          >
            <a-select-option :value="1">淘宝</a-select-option>
            <a-select-option :value="2">京东</a-select-option>
            <a-select-option :value="3">天猫</a-select-option>
          </a-select>
          <a-icon :style="{ width: '10%', fontSize: '20px' }" type="plus-circle" @click="addApply" />
        </a-form-model-item>
        <a-form-model-item label="图形缩略图">
          <a-upload-dragger
                  name="file"
                  :multiple="true"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽要上传的文件至上传区域
            </p>
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item>
          <template slot="label"><span style="color: #f00">需要添加小类</span></template>
          <template slot="help">
            <div style="color:#f00">如果增项需要添加小类可以添加，没有增项可以忽略</div>
          </template>
          <a-input type="text"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="affixVisible" :width="1000" title="附加内容">
      <a-descriptions :column="8" layout="vertical" bordered>
        <a-descriptions-item>
          <template slot="label">序号</template>
          1
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">业务名称</template>
          商标双保【个体】
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">小类数量</template>
          2（400）
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">加急</template>
          350
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">办理执照</template>
          500
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">双保</template>
          300
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">增加申请人数量</template>
          1（80）
        </a-descriptions-item>
        <a-descriptions-item>
          <template slot="label">小计</template>
          <div style="color: #f00;font-weight: 700">1630</div>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
    <ext-modal v-if="addVisible" :business-id="addForm.business_id" :business-name="addForm.business_name" :business-num="addForm.business_num" @cancel="onCancel"></ext-modal>
    <apply-modal v-if="applyVisible" @cancel="onCancel1"></apply-modal>
  </div>
</template>

<script>
  import { Ellipsis } from '@/components'
  import Clipboard from 'clipboard'
  import contractColumns from '@/columns/contract'
  import ApplyModal from '@/views/customer/components/ApplyModal'
  import SelectBusiness from '@/views/contract/components/SelectBusiness'
  export default {
    name: 'ContractBusiness',
    components: { Ellipsis, ApplyModal, SelectBusiness },
    data () {
      return {
        visible: false,
        singVisible: false,
        selectedColumns: contractColumns.selected,
        totalCount: 0,
        amount: 0,
        confirmLoading: false,
        sourceData: [],
        businessColumns: contractColumns.business,
        businessData: [],
        hdColumns: contractColumns.huodong,
        jlColumns: contractColumns.jiangli,
        hdData: [
          {
            id: '0',
            type: '赠送设计',
            time: '2021-12-24 23:12:00',
            total_num: '10',
            leftover_num: '3',
            business_name: '设计基础套餐',
            fee: '200',
            offical_fee: '100',
            note: '三个类送一个设计',
            code: 'ty123'
          }
        ],
        jlData: [
          {
            id: '0',
            type: '赠送设计',
            time: '2021-12-24 23:12:00',
            fee: '300',
            total_num: '10',
            leftover_num: '3',
            note: '三个类送一个设计',
            code: 'ty456'
          }
        ],
        hdVisible: false,
        remarkVisible: false,
        applyVisible: false,
        affixVisible: false,
        labelCol: { span: 5 },
        wrapperCol: { span: 16, offset: 0 },
        selectedData: [
          {
            id: '0',
            contract_index: '1',
            type: '变',
            business_no: 'xdxsdf',
            category: '商标',
            name: '商标申请',
            official_fee: '400',
            ext: '560',
            price: '附加内容',
            db: '否',
            bj: '1750',
            dlf: '50',
            remark: '已填写'
          },
          {
            id: '1',
            type: '保',
            contract_index: '2',
            business_no: 'xdxsdf',
            category: '商标',
            name: '商标申请',
            official_fee: '750',
            ext: '250',
            price: '附加内容',
            db: '是',
            bj: '550',
            dlf: '70',
            remark: '未填写'
          }
        ]
      }
    },
    methods: {
      onSign () {
        this.singVisible = true
      },
      businessModal () {
        this.visible = true
      },
      addItem (id, name, num) {
        this.addForm['business_id'] = id
        this.addForm['business_name'] = name
        this.addForm['business_num'] = num
        this.addVisible = true
      },
      showlist () {
        this.hdVisible = true
      },
      showRemark () {
        this.remarkVisible = true
      },
      showAffix () {
        this.affixVisible = true
      },
      addApply () {
        this.applyVisible = true
      },
      onCancel1 (visible) {
        this.applyVisible = visible
      },
      onCancel (visible) {
        this.visible = visible
      },
      copy () {
        const clipboard = new Clipboard('.copy')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          this.$message.error('复制失败')
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style scoped>

</style>
